import React, { Component } from 'react'
import { Input, InputNumber, Select, DatePicker, Divider } from 'antd'
import './LeftAside.less'
import { connect } from 'dva'
import moment from 'moment'

const namespaceClass = 'class'
function mapStateToProps(state) {
    const { shcoolClass } = state[namespaceClass]
    return {
        shcoolClass,
    }
}
function mapDispatchToProps(dispatch) {
    return {
        findAllClass() {
            dispatch({
                type: `${namespaceClass}/findAllClass`
            })
        },
    }
}
class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            title: '',
            time: {
                startTime: '',
                endTime: ''
            },
            classId: [],
            passScore: 0,
        }
        this.numberRange = this.numberRange.bind(this)
    }

    numberRange(start, end) {
        let numberList = []
        for (start; start < end; start += 1) {
            numberList.push(start)
        }
        return numberList
    }

    componentDidMount() {
        this.props.findAllClass()
    }

    render() {
        return <div className='left-aside'>
            <div style={{ textAlign: 'center' }}>
                <span>基础信息</span>
            </div>
            <Divider />
            <div className="title">
                <Input
                    className='input-1'
                    placeholder='输入考试标题'
                    onChange={(e) => {
                        this.setState({
                            title: e.target.value
                        }, () => {
                            this.props.onMessage(this.state)
                        })
                    }} />
            </div>
            <div className='item'>
                <span className='label'>开始时间：</span>
                <DatePicker
                    className='input-1'
                    showTime={{
                        defaultValue: '',
                        disabledHours: () => {
                            console.log(value)
                        },
                        disabledMinutes: () => { }
                    }}
                    format="YYYY-MM-DD HH:mm"
                    disabledDate={(current) => {
                        const { endTime } = this.state.time || {}
                        const tempCurrent = moment(current)
                        let start = false
                        let end = false
                        if (endTime) {
                            end = tempCurrent.startOf("day") > moment(endTime).startOf("day")
                        }
                        start = tempCurrent.startOf("day") < moment().startOf("day")
                        return start || end
                    }}
                    disabledTime={(current) => {
                        const { endTime } = this.state.time || {}
                        const tempCurrent = moment(current)
                        return {
                            disabledHours: () => {
                                let start = -1
                                let end = -1
                                if (tempCurrent.startOf("day") <= moment().startOf("day")) {
                                    start = 0
                                    end = moment().hour()
                                }
                                if (tempCurrent.startOf("day") >= moment(endTime).startOf("day")) {
                                    start = moment(endTime).hour() + 1
                                    end = 24
                                }
                                return this.numberRange(start, end)
                            },
                            disabledMinutes: (hour) => {
                                let start = -1
                                let end = -1
                                if (tempCurrent.startOf("day").hour(hour) <= moment().startOf("hour")) {
                                    start = 0
                                    end = moment().minute() + 1
                                }
                                if (tempCurrent.startOf("day").hour(hour) >= moment(endTime).startOf("hour")) {
                                    start = moment(endTime).minute()
                                    end = 60
                                }
                                return this.numberRange(start, end)
                            }
                        }
                    }}
                    onChange={(_, value) => {
                        this.setState({
                            time: {
                                ...this.state.time,
                                startTime: value
                            }
                        }, () => {
                            this.props.onMessage(this.state)
                        })
                    }} />
            </div>
            <div className='item'>
                <span className='label'>结束时间：</span>
                <DatePicker
                    className='input-1'
                    showTime={true}
                    format="YYYY-MM-DD HH:mm"
                    disabledDate={(current) => {
                        const { startTime } = this.state.time || {}
                        const tempCurrent = moment(current)
                        let start = false
                        if (startTime) {
                            start = tempCurrent.startOf("day") < moment(startTime).startOf("day")
                        } else {
                            start = tempCurrent.startOf("day") < moment().startOf("day")
                        }
                        return start
                    }}
                    disabledTime={(current) => {
                        const { startTime } = this.state.time || {}
                        const tempCurrent = moment(current)
                        return {
                            disabledHours: () => {
                                let start = -1
                                let end = -1
                                if (startTime) {
                                    if (tempCurrent.startOf("day") <= moment(startTime).startOf("day")) {
                                        start = 0
                                        end = moment(startTime).hour()
                                    }
                                } else {
                                    if (tempCurrent.startOf("day") <= moment().startOf("day")) {
                                        start = 0
                                        end = moment().hour()
                                    }
                                }
                                return this.numberRange(start, end)
                            },
                            disabledMinutes: (hour) => {
                                let start = -1
                                let end = -1
                                if (startTime) {
                                    if (tempCurrent.startOf("day").hour(hour) <= moment(startTime).startOf("hour")) {
                                        start = 0
                                        end = moment(startTime).minute() + 1
                                    }
                                } else {
                                    if (tempCurrent.startOf("day").hour(hour) <= moment().startOf("hour")) {
                                        start = 0
                                        end = moment().minute() + 1
                                    }
                                }
                                return this.numberRange(start, end)
                            }
                        }
                    }}
                    onChange={(_, value) => {
                        this.setState({
                            time: {
                                ...this.state.time,
                                endTime: value
                            }
                        }, () => {
                            this.props.onMessage(this.state)
                        })
                    }} />
            </div>
            <div className='item'>
                <span className='label'>参与班级：</span>
                <Select mode='multiple' className='input-1' placeholder='选择班级' onChange={(values) => {
                    this.setState({
                        classId: values
                    }, () => {
                        this.props.onMessage(this.state)
                    })
                }}>
                    {this.props.shcoolClass?.map?.((shcoolClass) => {
                        const { class_id, class_name } = shcoolClass
                        return <Select.Option key={class_id} value={class_id}>{class_name}</Select.Option>
                    })}
                </Select>
            </div>
            <div className='item'>
                <span className='label'>满分：</span>
                <InputNumber
                    className='input-1'
                    min={0}
                    readOnly
                    value={this.props.fullScore}
                    onChange={(value) => {
                        this.setState({
                            fullScore: value
                        }, () => {
                            this.props.onMessage(this.state)
                        })
                    }} />
            </div>
            <div className='item'>
                <span className='label'>及格：</span>
                <InputNumber
                    className='input-1'
                    min={0}
                    max={this.props.fullScore}
                    value={this.state.passScore}
                    onChange={(value) => {
                        this.setState({
                            passScore: value
                        }, () => {
                            this.props.onMessage(this.state)
                        })
                    }} />
            </div>
        </div>
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Index)
